/* ==================== CSS VARIABLES ==================== */
        :root {
            /* Background Colors */
            --bg-footer: #f4f1f1;
            --bg-copyright: #f4f1f1;
            --bg-footer-overlay: rgba(244, 241, 241, 0.9);
                 
            /* Text Colors */
            --text-primary: #212529;
            --text-secondary: #6c757d;
            --text-link: #0a66c2;
            --text-hover: #084e94;
            --text-grey: #808080;
            --text-dark: #140b0b;
            --text-white: #ffffff;
                 
            /* Font Settings */
            --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            --font-family-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                 
            /* Font Weights */
            --font-normal: 400;
            --font-medium: 500;
            --font-semibold: 600;
            --font-bold: 700;
                 
            /* Line Heights */
            --line-height-tight: 1.2;
            --line-height-normal: 1.5;
            --line-height-loose: 1.8;
            
            /* Tab Colors */
            --tab-child: #d32f2f;
            --tab-english: #1976d2;
            --tab-environment: #2e7d32;
            --tab-hindi: #ed6c02;
            --tab-math: #9c27b0;
        }

        /* Dark Mode Colors */
        body.dark-mode {
            --bg-footer: #2d2d2d;
            --bg-copyright: #404040;
            --bg-footer-overlay: rgba(45, 45, 45, 0.95);
            --text-primary: #ffffff;
            --text-secondary: #e0e0e0;
            --text-link: #6ea8fe;
            --text-hover: #8bb9fe;
            --text-grey: #c0c0c0;
            --text-dark: #f0f0f0;
        }

        /* ==================== FOOTER STYLING ==================== */
        .footer {
            width: 100%;
            margin-left: 0;
            padding: 20px 15px 15px 15px;
            background: linear-gradient(var(--bg-footer-overlay), var(--bg-footer-overlay)), url('/image_all/footer overlay.png') no-repeat center;
            background-size: cover;
            background-color: var(--bg-footer);
            color: var(--text-dark);
            box-sizing: border-box;
            font-family: var(--font-family-primary);
        }

        footer {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 20px;
            max-width: 1400px;
            margin: 0 auto;
            margin-bottom: 12px;
        }

        /* Left Section */
        footer .left {
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1 1 100%;
            min-width: 100%;
            text-align: center;
            align-items: center;
        }

        footer .left img {
            width: 140px;
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin-bottom: 5px;
        }

        footer .left p {
            font-size: 12px;
            line-height: 1.5;
            color: var(--text-link);
            font-family: var(--font-family-primary);
            font-weight: var(--font-normal);
            margin: 0;
            max-width: 280px;
        }

        footer .left div {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: center;
        }

        footer .left a {
            font-size: 12px;
            text-decoration: none;
            color: var(--text-link);
            font-family: var(--font-family-primary);
            font-weight: var(--font-medium);
            transition: color 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        /* Links Sections */
        footer .links-head, .links-social {
            flex: 1 1 100%;
            min-width: 100%;
            text-align: center;
        }

        footer .links {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 8px;
            justify-content: center;
        }

        .links-head h3, .links-social h3 {
            text-transform: uppercase;
            font-size: 14px;
            font-weight: var(--font-semibold);
            margin-bottom: 8px;
            color: var(--text-primary);
            font-family: var(--font-family-heading);
            letter-spacing: 0.5px;
        }

        .links-head hr, .links-social hr {
            width: 40px;
            height: 2px;
            background: var(--text-link);
            border: none;
            margin: 0 auto 10px auto;
        }

        .links-head .links-1, .links-2, .links-3, .links-social .links-1, .links-2 {
            display: flex;
            flex-direction: column;
            gap: 8px;
            text-align: center;
        }

        .links-head a, .links-social a {
            text-decoration: none;
            color: var(--text-grey);
            transition: 0.3s ease-in-out;
            font-size: 12px;
            font-family: var(--font-family-primary);
            font-weight: var(--font-normal);
            line-height: 1.5;
            display: inline-block;
        }

        .links-head a:hover, .links-social a:hover {
            color: var(--text-link);
            text-decoration: underline;
        }

        .links-social .links a {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .links-social .links a i {
            font-size: 16px;
            color: var(--text-link);
        }

        .links-social .links a ion-icon {
            font-size: 16px;
        }

        /* About Text Section */
        .about-text {
            margin-top: 15px;
            padding-top: 12px;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            color: var(--text-secondary);
            font-size: 11px;
            line-height: 1.5;
            font-family: var(--font-family-primary);
            text-align: center;
            padding-left: 10px;
            padding-right: 10px;
        }

        .about-text strong {
            color: var(--text-primary);
            font-weight: var(--font-bold);
            display: block;
            margin-bottom: 5px;
        }

        /* Copyright Section */
        .copyrightsection {
            width: 100%;
            margin-left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 12px 15px;
            background: var(--bg-copyright);
            color: var(--text-dark);
            margin-top: 10px;
            box-sizing: border-box;
            flex-wrap: wrap;
            gap: 10px;
            font-family: var(--font-family-primary);
            flex-direction: column;
            text-align: center;
        }

        .copyrightsection p, .copyrightsection a {
            font-size: 10px;
            margin: 0;
            font-family: var(--font-family-primary);
        }

        .copyrightsection p {
            color: var(--text-secondary);
            font-weight: var(--font-normal);
        }

        .copyrightsection .link {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .copyrightsection .link a {
            text-decoration: none;
            color: var(--text-grey);
            transition: 0.3s;
            font-weight: var(--font-medium);
        }

        .copyrightsection .link a:hover {
            color: var(--text-link);
        }

        /* ==================== PROFESSIONAL CARD STYLING ==================== */

        .description-section {
            max-width: 1400px;
            margin: 40px auto;
            padding: 0 20px;
        }

        .section-title {
            font-size: 32px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 40px;
            text-align: center;
            position: relative;
            padding-bottom: 15px;
            font-family: var(--font-family-heading);
        }

        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--text-link), #4a90e2);
            border-radius: 2px;
        }

        /* ==================== SUBJECT TABS STYLING ==================== */
        .subject-tabs {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin-bottom: 40px;
            padding: 10px;
        }

        .tab-btn {
            padding: 12px 24px;
            border: none;
            border-radius: 50px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            background: white;
            color: var(--text-primary);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            font-family: var(--font-family-primary);
            letter-spacing: 0.3px;
            border: 2px solid transparent;
        }

        .tab-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .tab-btn.active {
            border-color: currentColor;
            transform: scale(1.05);
        }

        .tab-btn[data-subject="all"] {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
        }

        .tab-btn[data-subject="child"] {
            background: rgba(211, 47, 47, 0.1);
            color: var(--tab-child);
            border-color: var(--tab-child);
        }

        .tab-btn[data-subject="english"] {
            background: rgba(25, 118, 210, 0.1);
            color: var(--tab-english);
            border-color: var(--tab-english);
        }

        .tab-btn[data-subject="environment"] {
            background: rgba(46, 125, 50, 0.1);
            color: var(--tab-environment);
            border-color: var(--tab-environment);
        }

        .tab-btn[data-subject="hindi"] {
            background: rgba(237, 108, 2, 0.1);
            color: var(--tab-hindi);
            border-color: var(--tab-hindi);
        }

        .tab-btn[data-subject="math"] {
            background: rgba(156, 39, 176, 0.1);
            color: var(--tab-math);
            border-color: var(--tab-math);
        }

        .test-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
            margin-top: 30px;
            transition: opacity 0.3s ease;
        }

        .test-grid.loading {
            opacity: 0.5;
            pointer-events: none;
        }

        .test-item {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            position: relative;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .test-item:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 40px rgba(10, 102, 194, 0.15);
            border-color: rgba(10, 102, 194, 0.2);
        }

        .test-header {
            padding: 20px 20px 15px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            background: linear-gradient(135deg, #f8faff, #ffffff);
        }

        .test-header h3 {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
            line-height: 1.4;
            font-family: var(--font-family-heading);
            letter-spacing: -0.01em;
        }

        .test-action {
            padding: 15px 20px 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: white;
        }

        .start-button {
            width: 100%;
            padding: 12px 20px;
            background: linear-gradient(135deg, var(--text-link), #4a90e2);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 4px 12px rgba(10, 102, 194, 0.2);
            font-family: var(--font-family-primary);
        }

        .start-button:hover {
            background: linear-gradient(135deg, #084e94, var(--text-link));
            transform: scale(1.02);
            box-shadow: 0 6px 16px rgba(10, 102, 194, 0.3);
        }

        .start-button:active {
            transform: scale(0.98);
        }

        .special-text {
            text-align: center;
            font-size: 13px;
            font-weight: 600;
            padding: 6px 12px;
            border-radius: 30px;
            background: #f8f9fa;
            display: inline-block;
            margin: 5px auto 0;
            letter-spacing: 0.3px;
            font-family: var(--font-family-primary);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
        }

        /* Category specific colors */
        .child-text {
            color: #d32f2f;
            background: rgba(211, 47, 47, 0.08);
            border-left: 3px solid #d32f2f;
        }

        .english-text {
            color: #1976d2;
            background: rgba(25, 118, 210, 0.08);
            border-left: 3px solid #1976d2;
        }

        .environment-text {
            color: #2e7d32;
            background: rgba(46, 125, 50, 0.08);
            border-left: 3px solid #2e7d32;
        }

        .hindi-text {
            color: #ed6c02;
            background: rgba(237, 108, 2, 0.08);
            border-left: 3px solid #ed6c02;
        }

        .math-text {
            color: #9c27b0;
            background: rgba(156, 39, 176, 0.08);
            border-left: 3px solid #9c27b0;
        }

        /* No results message */
        .no-results {
            grid-column: 1 / -1;
            text-align: center;
            padding: 60px 20px;
            font-size: 18px;
            color: var(--text-secondary);
            background: #f8f9fa;
            border-radius: 16px;
            animation: fadeIn 0.5s ease;
        }

        /* Responsive adjustments for tabs and cards */
        @media screen and (max-width: 767px) {
            .section-title {
                font-size: 26px;
                margin-bottom: 30px;
            }

            .subject-tabs {
                gap: 8px;
                padding: 5px;
            }

            .tab-btn {
                padding: 8px 16px;
                font-size: 13px;
            }

            .test-grid {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                gap: 15px;
            }

            .test-header h3 {
                font-size: 16px;
            }

            .start-button {
                padding: 10px 16px;
                font-size: 14px;
            }
        }

        @media screen and (max-width: 480px) {
            .test-grid {
                grid-template-columns: 1fr;
            }

            .test-item {
                max-width: 100%;
            }

            .section-title {
                font-size: 24px;
            }

            .subject-tabs {
                flex-direction: row;
                overflow-x: auto;
                padding: 10px 5px;
                justify-content: flex-start;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }

            .subject-tabs::-webkit-scrollbar {
                display: none;
            }

            .tab-btn {
                white-space: nowrap;
                flex-shrink: 0;
            }
        }

        /* Dark mode support for cards */
        body.dark-mode .test-item {
            background: #2d2d2d;
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        body.dark-mode .test-header {
            background: linear-gradient(135deg, #353535, #2d2d2d);
            border-bottom-color: rgba(255, 255, 255, 0.1);
        }

        body.dark-mode .test-header h3 {
            color: #ffffff;
        }

        body.dark-mode .test-action {
            background: #2d2d2d;
        }

        body.dark-mode .special-text {
            background: #3d3d3d;
            color: #e0e0e0;
        }

        body.dark-mode .tab-btn {
            background: #2d2d2d;
            color: #ffffff;
        }

        body.dark-mode .no-results {
            background: #2d2d2d;
            color: #e0e0e0;
        }

        body.dark-mode .child-text {
            background: rgba(211, 47, 47, 0.15);
            color: #ff6b6b;
        }

        body.dark-mode .english-text {
            background: rgba(25, 118, 210, 0.15);
            color: #6ea8fe;
        }

        body.dark-mode .environment-text {
            background: rgba(46, 125, 50, 0.15);
            color: #81c784;
        }

        body.dark-mode .hindi-text {
            background: rgba(237, 108, 2, 0.15);
            color: #ffb74d;
        }

        body.dark-mode .math-text {
            background: rgba(156, 39, 176, 0.15);
            color: #ce93d8;
        }

        /* ==================== FOOTER RESPONSIVE ==================== */

        /* Tablet Devices (768px and above) */
        @media screen and (min-width: 768px) {
            .footer {
                padding: 25px 30px 20px 30px;
            }
            
            footer {
                gap: 25px;
                margin-bottom: 15px;
            }
            
            /* Left Section - Tablet */
            footer .left {
                flex: 1 1 280px;
                min-width: 250px;
                text-align: left;
                align-items: flex-start;
            }
            
            footer .left img {
                width: 180px;
            }
            
            footer .left p {
                font-size: 11px;
                max-width: 100%;
            }
            
            footer .left div {
                align-items: flex-start;
            }
            
            /* Links Sections - Tablet */
            footer .links-head, .links-social {
                flex: 1 1 200px;
                min-width: 180px;
                text-align: left;
            }
            
            .links-head hr, .links-social hr {
                margin: 0 0 8px 0;
            }
            
            .links-head .links-1, .links-2, .links-3, .links-social .links-1, .links-2 {
                text-align: left;
            }
            
            .links-social .links a {
                justify-content: flex-start;
            }
            
            footer .links {
                justify-content: flex-start;
            }
            
            .copyrightsection {
                flex-direction: row;
                justify-content: space-between;
                text-align: left;
                padding: 8px 30px;
            }
            
            .about-text {
                padding-left: 0;
                padding-right: 0;
            }
            
            .about-text strong {
                display: inline;
                margin-bottom: 0;
            }
        }

        /* Desktop Devices (1024px and above) */
        @media screen and (min-width: 1024px) {
            .footer {
                padding: 30px 40px 25px 40px;
            }
            
            footer {
                gap: 30px;
            }
            
            footer .left img {
                width: 200px;
            }
            
            footer .left p,
            footer .left a,
            .links-head a,
            .links-social a {
                font-size: 12px;
            }
            
            .links-head h3,
            .links-social h3 {
                font-size: 14px;
            }
            
            .about-text {
                font-size: 11px;
            }
            
            .copyrightsection p,
            .copyrightsection a {
                font-size: 11px;
            }
        }

        /* Large Desktop (1920px and above) */
        @media screen and (min-width: 1920px) {
            .footer {
                padding: 35px 40px 25px 40px;
            }
            
            footer .left img {
                width: 220px;
            }
            
            footer .left p,
            footer .left a,
            .links-head a,
            .links-social a {
                font-size: 13px;
            }
            
            .links-head h3,
            .links-social h3 {
                font-size: 15px;
            }
            
            .about-text {
                font-size: 12px;
            }
            
            .copyrightsection p,
            .copyrightsection a {
                font-size: 12px;
            }
        }

        /* Small Mobile (up to 480px) */
        @media screen and (max-width: 480px) {
            .footer {
                padding: 15px 12px 12px 12px;
            }
            
            footer {
                gap: 18px;
                margin-bottom: 10px;
            }
            
            footer .left img {
                width: 120px;
            }
            
            footer .left p {
                font-size: 11px;
            }
            
            footer .left a {
                font-size: 11px;
            }
            
            .links-head h3,
            .links-social h3 {
                font-size: 13px;
            }
            
            .links-head a,
            .links-social a {
                font-size: 11px;
            }
            
            footer .links {
                gap: 15px;
            }
            
            .links-head .links-1, .links-2,
            .links-social .links-1, .links-2 {
                gap: 6px;
            }
            
            .about-text {
                font-size: 10px;
                margin-top: 12px;
                padding-top: 10px;
            }
            
            .copyrightsection {
                padding: 10px 12px;
                gap: 8px;
            }
            
            .copyrightsection p,
            .copyrightsection a {
                font-size: 9px;
            }
            
            .copyrightsection .link {
                gap: 12px;
            }
        }

        /* Very Small Mobile (up to 360px) */
        @media screen and (max-width: 360px) {
            .footer {
                padding: 12px 10px 10px 10px;
            }
            
            footer .left img {
                width: 100px;
            }
            
            footer .left p,
            footer .left a,
            .links-head a,
            .links-social a {
                font-size: 10px;
            }
            
            .links-head h3,
            .links-social h3 {
                font-size: 12px;
            }
            
            .about-text {
                font-size: 9px;
            }
            
            .copyrightsection p,
            .copyrightsection a {
                font-size: 8px;
            }
            
            .copyrightsection .link {
                gap: 10px;
            }
        }

        /* Landscape Mode for Mobile */
        @media screen and (max-width: 896px) and (orientation: landscape) {
            .footer {
                padding: 12px 20px 10px 20px;
            }
            
            footer {
                gap: 15px;
                margin-bottom: 8px;
            }
            
            footer .left {
                flex: 1 1 100%;
            }
            
            footer .left img {
                width: 100px;
            }
            
            footer .links-head,
            .links-social {
                flex: 1 1 45%;
                min-width: 45%;
            }
            
            .about-text {
                margin-top: 10px;
                padding-top: 8px;
            }
        }

        /* Dark Mode Support for Footer */
        body.dark-mode .footer {
            background: linear-gradient(var(--bg-footer-overlay), var(--bg-footer-overlay)), url('/image_all/footer overlay.png') no-repeat center;
            background-size: cover;
        }

        body.dark-mode .copyrightsection {
            background: var(--bg-copyright);
        }

        body.dark-mode .links-head a,
        body.dark-mode .links-social a {
            color: var(--text-grey);
        }

        body.dark-mode footer .left p {
            color: var(--text-link);
        }

        body.dark-mode .about-text {
            border-top-color: rgba(255, 255, 255, 0.1);
        }